<script setup lang="ts">
import Aside from "@/views/Index/components/Aside/index.vue";
import Header from "@/views/Index/components/Header/index.vue";
// import Footer from "@/views/Index/components/Footer/index.vue";
import {onMounted, onUnmounted, ref} from "vue";
import Main from "@/views/Index/components/Main/index.vue";
// 用于控制侧边栏是否折叠
const isCollapse = ref<boolean>(false);

// 窗口大小发生更改要执行的函数
const resizeHandler = function(){
    isCollapse.value = document.body.clientWidth<800;
}
// 当组件挂载完毕之后
onMounted(function(){
    // 当窗口大小发生更改，要触发resizeHandler
    window.addEventListener("resize",resizeHandler);
    resizeHandler();
})
// 组件销毁的钩子
onUnmounted(function(){
    window.removeEventListener("resize",resizeHandler);
})
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside :width="isCollapse?'auto':'220px'">
                <Aside :isCollapse="isCollapse"/>
            </el-aside>
            <el-container>
                <el-header>
                    <Header v-model:isCollapse="isCollapse"/>
                </el-header>
                <el-main>
                    <Main/>
                </el-main>
<!--                <el-footer>-->
<!--                    <Footer/>-->
<!--                </el-footer>-->
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="less">
.common-layout{
    min-width: 800px;
    .el-header,.el-footer{
        height:50px;
        padding:0;
    }
    .el-main{
        padding:5px 5px 0 5px;
    }
}
</style>
<style>
.el-descriptions__label.el-descriptions__cell.is-bordered-label {
    font-weight: 700;
}
</style>